<template>
	<view class="content">
		<!--房间列表-->
		<view class="content_1">
			<block v-for="(item_room, index_room) in roomList" :key='index_room'>
				<view class="room_list">
					<view class="room_listleft">
						<view class="room_num">{{item_room.show_name}}</view>
						<view class="room_detail">
							<view class="room_state" style="border: 2upx solid #B3E9DC; color: #B3E9DC;" v-if="item_room.status == 1">空房</view>
							<view class="room_state_view" v-if="item_room.status != 1">
								<view class="room_state" style="margin-right: 50upx; border: 2upx solid #999999; color: #999999;">
									{{item_room.show_status.msg}}
								</view>
								<view class="room_rentername">
									租客 {{item_room.user_info.user_name}}
								</view>
							</view>
							<!-- <view class="room_state_view" v-if="item_room.status == 4">
								<view class="room_state" style="margin-right: 50upx; border: 2upx solid #999999; color: #999999;">退款成功</view>
								<view class="room_rentername">租客 {{item_room.user_info.user_name}}</view>
							</view>
							<view class="room_state_view" v-if="item_room.status == 5">
								<view class="room_state" style="margin-right: 50upx; border: 2upx solid #999999; color: #999999;">已逾期</view>
								<view class="room_rentername">租客 {{item_room.user_info.user_name}}</view>
							</view>
							<view class="room_state_view" v-if="item_room.status == 6">
								<view class="room_state" style="margin-right: 50upx; border: 2upx solid #ff0000; color: #ff0000;">待传账单</view>
								<view class="room_rentername">租客 {{item_room.user_info.user_name}}</view>
							</view>
							<view class="room_state_view" v-if="item_room.status == 7">
								<view class="room_state" style="margin-right: 50upx; border: 2upx solid #ff0000; color: #ff0000;">申请退租</view>
								<view class="room_rentername">租客 {{item_room.user_info.user_name}}</view>
							</view>
							<view class="room_state_view" v-if="item_room.status == 8">
								<view class="room_state" style="margin-right: 50upx; border: 2upx solid #ff0000; color: #ff0000;">同意退租</view>
								<view class="room_rentername">租客 {{item_room.user_info.user_name}}</view>
							</view>
							<view class="room_state_view" v-if="item_room.status == 9">
								<view class="room_state" style="margin-right: 50upx; border: 2upx solid #ff0000; color: #ff0000;">拒绝退租</view>
								<view class="room_rentername">租客 {{item_room.user_info.user_name}}</view>
							</view> -->
							<view class="room_time">本月缴费时间：{{item_room.pay_roomtime}}</view>
							<view class="room_time">上月缴费时间：---</view>
						</view>
					</view>
					<view class="room_listright" style="background-color: #63D0D5;" @click="chooseRoom(item_room.room_id)">选择</view>
					<!-- <view class="room_listright" v-else></view> -->
				</view>
			</block>
		</view>
		<!--发送-->
		<view class="content_2" @click="send">
			发送
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	let seach_number = 10
	let page = 10
	export default {
		data() {
			return {
				roomstate: '0',
				roomList: [{
						id: '1',
						roomname: '101',
						roomstate: '0',
						rentername: '小明',
					},
					{
						id: '2',
						roomname: '102',
						roomstate: '1',
						rentername: '小红',
					},
					{
						id: '3',
						roomname: '103',
						roomstate: '2',
						rentername: '小刚',
					}
				]
			}
		},
		methods: {
			//选择房间
			chooseRoom: function(index) {
				console.log(index)
				uni.showToast({
					title: '已选择房间',
					icon: 'none',
					position: 'center',
				})
				this.room_id = index
			},
			//提交账单
			send: function() {
				console.log(this.room_id)
				if (this.room_id == undefined) {
					uni.showToast({
						title: '请选择房间',
						icon: 'none',
						position: 'center',
					})
				} else {
					new Request('landboos/Create_Receipt/ChooseRoom').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								openid: app.globalData.openid,
								room_id: this.room_id,
								rentmoney: this.rentmoney,
								image_id: this.image_id,
								show_img: this.system_url,
								DevelopVersion: app.globalData.DevelopVersion,
								project: app.globalData.project,
								userid: app.globalData.userid,
							}
						},
						(res) => {
							if (res.data.status == '-1') {
								new Request().showToast('房间已经逾期了', 'none', () => {});
							} else if (res.data.status == '-2') {
								new Request().showToast('未临期不可上传账单', 'none', () => {});
							} else if (res.data.status == '-3') {
								new Request().showToast('拒绝入住的房间不可上传账单', 'none', () => {});
							} else if (res.data.code == '0') {
								new Request().showToast('房间还没出租', 'none', () => {});
							} else if (res.data.code == '1') {
								uni.navigateBack({
									delta: 3,
									success: (res) => {
										uni.showToast({
											title: '发送成功',
											icon: 'none',
											position: 'center',
										})
									}
								})
							}
						}
					)
				}
			},
			//上拉加载
			loadMore: function() {
				new Request('landboos/room/Get_All_Room_List/GetRoomList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							seach_number: seach_number,
							page: page,
						}
					},
					(res) => {
						//判断有没有房源
						if (res.data.code == 0 || res.data.data == null) {
							new Request().showToast('暂无更多数据了', 'none', () => {});
						} else {
							page += seach_number
							this.roomList = this.roomList.concat(res.data.data)
							app.globalData.roomList = res.data.data
						}
					}
				)
			},
		},
		//上拉加载,调用loadMore
		onReachBottom() {
			var that = this
			setTimeout(function() {
				that.loadMore()
			}, 300);
		},
		onLoad(option) {
			this.rentmoney = option.rentmoney
			this.image_id = option.image_id
			this.system_url = option.system_url
			console.log(this.system_url)
			seach_number = 10
			page = 10
			//获取房间列表
			new Request('landboos/room/Get_All_Room_List/GetRoomList').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid,
						seach_number: seach_number,
						page: 0,
					}
				},
				(res) => {
					if (res.data.code == 0) {
						new Request().showToast(res.data.msg);
						return;
					}
					this.roomList = res.data.data;
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	/*
		房间列表样式
	*/
	.content {
		padding-bottom: 190upx;
	}
	.content_1 {
		margin: 0 20upx;
	}

	.room_list {
		height: 180upx;
		display: flex;
		align-items: center;
		margin-top: 40upx;
	}

	.room_listleft {
		height: 180upx;
		width: 630upx;
		background-color: #FFFFFF;
		border-top-left-radius: 10upx;
		border-bottom-left-radius: 10upx;
		display: flex;
		align-items: center;
	}

	.room_listright {
		height: 180upx;
		width: 80upx;
		background-color: #999999;
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
		line-height: 180upx;
		text-align: center;
		font-size: 24upx;
		color: #FFFFFF;
	}

	.room_num {
		height: 180upx;
		width: 160upx;
		margin-right: 40upx;
		line-height: 180upx;
		text-align: center;
		font-size: 56upx;
		color: #101010;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.room_detail {
		height: 130upx;
		width: 470upx;
		display: flex;
		flex-direction: column;
		padding: 25upx 0upx;
	}

	.room_state_view {
		height: 50upx;
		display: flex;
		align-items: center;
	}

	.room_state {
		width: 120upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 28upx;
		text-align: center;
	}

	.room_rentername {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #101010;
	}

	.room_time {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #101010;
	}

	/*
		发送按钮样式
	*/
	.content_2 {
		height: 72upx;
		width: 750upx;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
		background-color: #63D0D5;
		position: fixed;
		z-index: 999;
		bottom: 0upx;
		left: 0upx;
	}
</style>
